<template>
  <el-dialog :before-close="beforeDialog" :visible.sync="goodDataVisible" title="收货地址">
    <el-form ref="ruleForm" :model="form" :rules="rules">
      <el-form-item :label-width="formLabelWidth" label="商品名称:" prop="goods_name">
        <el-input v-model="form.goods_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="价格:" prop="goods_price">
        <el-input v-model="form.goods_price" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="数量:" prop="goods_number">
        <el-input v-model="form.goods_number" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="重量:" prop="goods_weight">
        <el-input v-model="form.goods_weight" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:goodDataVisible',false)">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { putGoodsData } from '@/api/commodity'

export default {
  name: 'putGoodsData',
  data () {
    return {
      formLabelWidth: '120px',
      rules: {
        goods_name: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ],
        goods_price: [
          {
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }
        ],
        goods_number: [
          {
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }
        ],
        goods_weight: [
          {
            required: true,
            message: '请输入重量',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 关闭弹框
    beforeDialog () {
      this.$emit('update:goodDataVisible', false)
    },
    // 修改商品
    async onSubmit () {
      // this.$emit('update:goodDataVisible', false)
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          try {
            const res = await putGoodsData(this.form.goods_id, this.form)
            if (res.meta.status === 200) {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
            } else {
              this.$message.error(res.meta.msg)
            }
          } catch {
            this.$message.error('修改商品失败')
          }
        }
      })
    }
  },
  props: {
    goodDataVisible: Boolean,
    form: Object
  }
}
</script>

<style scoped>

</style>
